<template>
  <div>
    <van-nav-bar left-arrow style="background: blue">
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <span style="color: #fff">新增客户信息</span>
      </template>
      <template #right>
        <van-icon name="wap-home-o" color="#fff" size="25" />
      </template>
    </van-nav-bar>

    <van-cell-group class="cuents_ct">
      <van-field v-model="username" error required label="客户信息" />
      <van-field v-model="phone" error required label="联系方式" />
    </van-cell-group>

    <div>
      <!-- 输入任意文本 -->
      <van-field v-model="education" label="学历" input-align="right" />
      <van-field v-model="age" label="年龄" input-align="right" />
      <van-field v-model="genter" label="性别" input-align="right" />
      <van-field v-model="city" label="所属城市" input-align="right" />
      <van-field v-model="company" label="公司名称" input-align="right" />
      <van-field v-model="work" label="职务" input-align="right" />
    </div>

    <div class="foot">
      <van-button
        type="primary"
        size="large"
        class="btn"
        round
        @click="handleSave"
        >保存</van-button
      >
    </div>
  </div>
</template>

<script>
import { getNewCust } from "@/request/api";
export default {
  data() {
    return {
      //客户信息
      username: "",
      // 联系方式
      phone: "",
      // 学历
      education: "",
      // 年龄
      age: "",
      // 性别
      genter: "",
      // 所属城市
      city: "",
      // 公司名称
      company: "",
      // 职务
      work: "",
    };
  },
  created() {},
  methods: {
    handleSave() {
      getNewCust({
        // 客户名称
        custName: this.username,
        // 所属地市
        cityName: this.city,
        // 公司名称
        company: this.company,
        // 职务
        position: this.work,
        // 联系方式
        telephone: this.phone,
        // 学历
        education: this.education,
        // 性别
        sex: this.genter,
        // 年龄
        age: this.age,
      });
      this.$router.push("/mycuents");
    },
  },
};
</script>

<style scoped>
.cuents_ct {
  margin: 0.8rem 0;
}
.foot {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  text-align: center;
}
.btn {
  width: 90%;
}
</style>
